<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ECharts 示例</title>
    <!-- 引入 ECharts 的 CDN -->
    <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
    <style>
        /* 设置图表容器的样式 */
        #chart-container {
            width: 100%;
            height: 500px;
            margin: 20px auto;
            border: 1px solid #ccc;
        }
        /* 设置显示其他数据的样式 */
        .data-container {
            margin: 20px;
            padding: 10px;
            border: 1px solid #ccc;
            background-color: #f9f9f9;
        }
        /* 设置输入框和按钮的样式 */
        .input-container {
            margin: 20px;
            text-align: center;
        }
        .input-container input[type="text"] {
            width: 70%;
            padding: 10px;
            font-size: 16px;
        }
        .input-container button {
            padding: 10px 20px;
            font-size: 16px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <!-- 输入框和按钮 -->
    <div class="input-container">
        <input type="text" id="question-input" placeholder="请输入问题">
        <button id="submit-button">提交</button>
    </div>
    <!-- 图表容器 -->
    <div id="chart-container"></div>
    <!-- 其他数据容器 -->
    <div id="data-container" class="data-container"></div>

    <script>
        // 获取输入框和按钮的 DOM 元素
        const questionInput = document.getElementById('question-input');
        const submitButton = document.getElementById('submit-button');

        // 添加按钮点击事件
        submitButton.addEventListener('click', () => {
            const question = questionInput.value.trim();
            if (question) {
                renderData(question);
            } else {
                alert('请输入问题！');
            }
        });

        // 发起 POST 请求获取后端数据
        async function fetchData(question) {
            const url = 'http://localhost:8080/api/chatbi/ask1';
            const formData = new FormData();
            formData.append('question', question); // 使用用户输入的问题

            try {
                const response = await fetch(url, {
                    method: 'POST',
                    body: formData,
                    headers: {
                        'Authorization': 'Bearer eyJhbGciOiJIUzI1NiJ9.eyJleHAiOjE4MDczOTQyNjQsInVzZXJJZCI6MX0.NIRFGFkwIXbye3S5cs1CXFHj4qpJL8E_XbNt9mCPhDQ'
                    }
                });

                if (!response.ok) {
                    throw new Error(`HTTP error! status: ${response.status}`);
                }

                const data = await response.json();
                console.log('后端返回的数据:', data); // 调试信息
                return data;
            } catch (error) {
                console.error('请求失败:', error);
                alert('请求失败，请检查网络或输入内容！');
            }
        }

        // 处理后端返回的数据
        async function renderData(question) {
            const data = await fetchData(question);

            if (data && data.code === 1 && data.data) {
                // 获取图表配置
                const chartConfig = data.data.option;

                // 初始化 ECharts 实例
                const chartContainer = document.getElementById('chart-container');
                const myChart = echarts.init(chartContainer);

                // 设置图表配置
                myChart.setOption(chartConfig);

                // 显示其他数据
                const dataContainer = document.getElementById('data-container');
                dataContainer.innerHTML = `
                    <h2>分析结果</h2>
                    <p><strong>摘要：</strong>${data.data.analysis.summary}</p>
                    <p><strong>图表类型：</strong>${data.data.analysis.chart_type}</p>
                    <p><strong>建议：</strong>${data.data.analysis.recommendation}</p>
                    <p><strong>关键点：</strong></p>
                    <ul>
                        ${data.data.analysis.key_points.map(point => `<li>${point}</li>`).join('')}
                    </ul>
                    <p><strong>SQL 查询：</strong>${data.data.sql}</p>
                `;
            } else {
                console.error('后端返回的数据格式不正确或缺少必要字段:', data);
                alert('后端返回的数据格式不正确或缺少必要字段！');
            }
        }
    </script>
</body>
</html>